<template>
	<view class="content">
		<view class="headTop">
			<view class="padding-bottom">
				<me-tabs v-model="tabIndex" nameKey='title' :tabs="tabs" @change="tabChange"></me-tabs>
			</view>
		</view>

		<view style="margin-top: 110rpx;" v-if="tabIndex==0">
			<view class="list flex justify-center flex-wrap" v-for="(item,index) in formArrs" :key="index">
				<view class="list-box">
					<view class="list-box-item flex justify-between flex-wrap">
						<view class="flex align-center" style="height: 100%;">
							<image :src="item.shopCover?item.shopCover:'../../static/logo.png'" mode=""></image>
							<view class="list-box-item-info">
								<view class="flex align-center">
									{{item.shopName?item.shopName:''}}
								</view>
								<view class="">
									<u-rate :count="count" v-model="value" active-color="#FFAA01"
										inactive-color="#FFAA01" style="margin-left: -5rpx;"></u-rate>
									{{item.shopScore}} |
									<text style="margin: 0 0 0 10rpx;">{{item.phone}} </text>
								</view>
								<view class="flex align-center" style="line-height: 30rpx;">

									<text style="margin: 0 10rpx 0 10rpx;" v-if="item.province">
										{{item.province}}{{item.city}}
									</text>
									<text style="margin: 0 10rpx 0 10rpx;" v-else>
										暂无
									</text>
								</view>

							</view>
						</view>
						<view class="list-box-item-fw">
							简介：{{item.shopLable || "暂无"}}
						</view>
						<view style="width: 100%;display: flex;" v-if="!shopId">

							<button class="sq_one" @click="getEmployLists(item)">申请绑定</button>
						</view>
					</view>

				</view>

			</view>
			<empty v-if="!formArrs.length" style="z-index:0;position: relative;top: -20px;"></empty>
		</view>


		<view style="margin-top: 110rpx;" v-if="tabIndex==1">
			<view class="list flex justify-center flex-wrap" v-for="(item,index) in formArr" :key="index">
				<view class="list-box" style="position: relative;">
					<view class="list-box-item flex justify-between flex-wrap">
						<view class="flex align-center" style="height: 100%;">
							<image
								:src="item.shopInfo && item.shopInfo.shopCover?item.shopInfo.shopCover:'../../static/logo.png'"
								mode=""></image>
							<view class="list-box-item-info">
								<view class="flex align-center">
									{{item.shopInfo.shopName?item.shopInfo.shopName:''}}
								</view>
								<view class="">
									<u-rate :count="count" v-model="value" active-color="#FFAA01"
										inactive-color="#FFAA01"
										style="margin-left: -5rpx;"></u-rate>{{item.shopInfo.shopScore}}
									|
									<text style="margin: 0 0 0 10rpx;">{{item.shopInfo.phone}} </text>
								</view>
								<view class="flex align-center" style="line-height: 30rpx;">

									<text style="margin: 0 10rpx 0 10rpx;"
										v-if="item.shopInfo && item.shopInfo.province">
										{{item.shopInfo.province}}{{item.shopInfo.city}}
									</text>
									<text style="margin: 0 10rpx 0 10rpx;" v-else>
										暂无
									</text>
								</view>

							</view>
						</view>
						<view class="list-box-item-fw">
							简介：{{item.shopInfo.shopLable}}
						</view>
						<view class="list-box-item-fw" v-if="item.status == 2">
							拒绝原因：{{item.reason}}
						</view>
						<view style="width: 100%;display: flex;" v-if="item.status == 0">
							<button class="yaoqing_btn1" @click="noEmploy(item)">拒绝</button>

							<button class="yaoqing_btn" @click="getEmployList(item)">接受</button>
						</view>
					</view>


					<view
						style="width: 120rpx;height: 50rpx;background-color: #557EFD;position: absolute;top: 0;right: 0;display: flex;justify-content: center;align-items: center;color: white;"
						v-if="item.status == 1">
						已接受
					</view>
					<view
						style="width: 120rpx;height: 50rpx;background-color: #ff0000;position: absolute;top: 0;right: 0;display: flex;justify-content: center;align-items: center;color: white;"
						v-if="item.status == 2">
						已拒绝
					</view>

				</view>


			</view>
			<empty v-if="!formArr.length" style="z-index:0;position: relative;top: -20px;"></empty>
		</view>


		<u-popup v-model="showAvatar" border-radius="14" width="600" :closeable="true" mode="center">
			<view class="showAvatar-title">
				填写信息
			</view>

			<view v-if="onStatus == 1">
				<view class="showAvatar-line">
					服务项目
				</view>
				<view class="showAvatar-list">
					<u-checkbox-group>
						<u-checkbox v-model="item.checked" v-for="(item, index) in employList" :key="index"
							:name="item.name">{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view v-if="onStatus == 2">
				<view class="showAvatar-line">
					拒绝理由
				</view>
				<u-input placeholder="请输入拒绝理由" style="background-color: #F5F5F5;padding: 0 20rpx;" v-model="myDetails"
					type="textarea" :border="true" :height="100" :auto-height="false" />
			</view>





			<view class="showAvatar-submit">
				<view @click="getJie()" class="showAvatar-submit-box flex justify-center align-center">
					确认
				</view>
			</view>
			<view class="showAvatar-bottom"></view>
		</u-popup>



		<u-popup v-model="showAvatars" border-radius="14" width="600" :closeable="true" mode="center">
			<view class="showAvatar-title">
				填写信息
			</view>

			<view>
				<view class="showAvatar-line">
					服务项目
				</view>
				<view class="showAvatar-list">
					<u-checkbox-group>
						<u-checkbox v-model="item.checked" v-for="(item, index) in employLists" :key="index"
							:name="item.name">{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>





			<view class="showAvatar-submit">
				<view @click="getJies()" class="showAvatar-submit-box flex justify-center align-center">
					确认
				</view>
			</view>
			<view class="showAvatar-bottom"></view>
		</u-popup>




	</view>
</template>

<script>
	import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
	import empty from '@/components/empty.vue';
	export default {
		components: {
			meTabs,
			empty
		},
		data() {
			return {
				formArr: [],
				formArrs: [],
				employList: [],
				employLists: [],
				showAvatar: false,
				showAvatars: false,
				value: 1,
				authentication: 1,
				count: 1,
				onStatus: 0,
				tabIndex: 0,
				check: [],
				myDetails: "",
				shopId: uni.getStorageSync('shopId'),
				tabs: [{
						title: '商户列表',
						status: '0'
					},
					{
						title: '绑定邀请',
						status: '1'
					}
				],
				queryParams: {
					page: 1,
					limit: 10,
					city: "",
					userId: uni.getStorageSync("userId")
				},
				form: {},
			}
		},
		onLoad() {
			this.getLists()
			this.getInfo()
		},
		onShow() {
			
		},
		methods: {
			getList() {
				this.$Request.get('/app/userShopBind/getBindInfo', {
					type: 1
				}).then(res => {
					if (res.code == 0) {
						this.formArr = res.data
						this.getInfo()
					}
				})
			},
			getLists() {
				this.queryParams.city = uni.getStorageSync('city')
				this.$Request.get('/app/shop/getShopListByCity', this.queryParams).then(res => {
					if (res.code == 0) {
						this.formArrs = res.data.list
						this.getInfo()
					}
				})
			},



			//拒绝绑定
			noEmploy(e) {
				this.onStatus = 2
				this.showAvatar = true
				this.form = e
			},


			//获取服务列表
			getEmployList(e) {
				this.onStatus = 1
				this.form = e
				let data = {
					authentication: uni.getStorageSync('authentication') | "",
					shopId: e.shopId,
				}

				this.$Request.getT('/app/hospitalEmploy/getEmployList', data).then(res => {
					if (res.code == 0) {
						let arrs = []
						res.data.map(item => {
							let obj = {
								name: item.serviceName,
								checked: false,
								disabled: false,
								serviceId: item.serviceId
							}
							arrs.push(obj)
						})
						this.employList = arrs
						this.showAvatar = true
					} else {
						this.employList = []
						this.showAvatar = true
					}
				})
			},


			//获取服务列表
			getEmployLists(e) {
				this.form = e
				let data = {
					authentication: uni.getStorageSync('authentication') | "",
					shopId: e.shopId,
				}

				this.$Request.getT('/app/hospitalEmploy/getEmployList', data).then(res => {
					if (res.code == 0) {
						let arrs = []
						res.data.map(item => {
							let obj = {
								name: item.serviceName,
								checked: false,
								disabled: false,
								serviceId: item.serviceId
							}
							arrs.push(obj)
						})
						this.employLists = arrs
						this.showAvatars = true
					} else {
						this.employLists = []
						this.showAvatars = true
					}
				})
			},







			// 切换菜单
			tabChange() {
				// this.formArr = []; // 置空列表,显示加载进度条
				// this.formArrs = []; // 置空列表,显示加载进度条
				if (this.tabIndex == 0) {
					this.getLists()
				} else if (this.tabIndex == 1) {
					this.getList()
				}
			},
			getInfo() {
				this.$Request.get('/app/user/selectUserById').then(res => {
					if (res.code == 0) {
						if (res.data.shopId) {
							uni.setStorageSync('shopId', res.data.shopId)
							this.shopId = res.data.shopId
						} else {
							uni.setStorageSync('shopId', '')
							this.shopId = ''
						}
					}
				})
			},

			// 接受或拒绝绑定
			getJie() {
				let that = this
				let serviceIds = []
				this.employList.map(item => {
					if (item.checked) {
						serviceIds.push(item.serviceId)
					}
				})

				let data = {
					status: that.onStatus,
					id: that.form.id,
					userId: that.form.userId,
					shopId: that.form.shopId,
					type: that.form.type,
					serviceIds: serviceIds.join(','),
					reason: that.myDetails,
				}
				if (that.onStatus == 1) {
					data.reason = ""
				} else if (that.onStatus == 2) {
					data.serviceIds = ''
				}
				that.$Request.postJson('/app/userShopBind/confirmBind', data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '已完成',
							icon: 'success',
							duration: 3000
						})


					} else {
						uni.showToast({
							title: '失败',
							icon: 'warn',
							duration: 3000
						})
					}
					that.showAvatar = false
					that.getList()
					that.getLists()
				})

			},



			// 发起申请
			getJies() {
				let that = this
				let serviceIds = []
				this.employLists.map(item => {
					if (item.checked) {
						serviceIds.push(item.serviceId)
					}
				})
				
				
		
				
				let data = {
					status: 0,
					userId: uni.getStorageSync('userId'),
					shopId: that.form.shopId,
					type: 2,
					serviceIds: serviceIds.join(','),
					reason: "",
				}
				
				that.$Request.postJson('/app/userShopBind/bindShop', data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '已完成',
							icon: 'success',
							duration: 3000
						})

						that.getInfo()
					} else {
						uni.showToast({
							title: '失败',
							icon: 'warn',
							duration: 3000
						})
					}
					that.showAvatars = false
					that.getList()
					that.getLists()
				})

			}
		},

	}
</script>

<style lang="scss">
	.sq_one {
		width: 100%;

		line-height: 60upx;
		margin-top: 30upx;
		height: 65upx;
		color: #FFFFFF;
		background: #557EFD;
		margin-left: 32upx;
		margin-right: 32upx;

		background-size: 100%;
	}

	.yaoqing_btn {
		width: 50%;

		line-height: 80upx;
		margin-top: 30upx;
		height: 85upx;
		color: #FFFFFF;
		background: #557EFD;
		margin-left: 32upx;
		margin-right: 32upx;

		background-size: 100%;
	}

	.yaoqing_btn1 {
		width: 50%;

		line-height: 80upx;
		margin-top: 30upx;
		height: 85upx;
		color: #FFFFFF;
		background: #ff0000;
		margin-left: 32upx;
		margin-right: 32upx;

		background-size: 100%;
	}


	page {
		background-color: #F5F5F5;
	}

	.search {
		width: 100%;
		height: 80rpx;
		background-color: #ffffff;
		position: fixed;
		top: 0;
		z-index: 999;

		.search-box {
			width: 686rpx;
			height: 100%;
		}
	}

	.sx {
		width: 100%;
		height: 80rpx;
		background-color: #ffffff;
		position: fixed;
		top: 76rpx;
		z-index: 999;
	}

	.list {
		width: 100%;
		height: auto;
		z-index: 1;

		.list-box {
			width: 686rpx;
			height: auto;

			.list-box-item {
				width: 100%;
				// height: 200rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				padding: 20rpx 0;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx;
					margin-left: 20rpx;
					z-index: 1;
				}

				.list-box-item-info {
					margin-left: 20rpx;

					view:nth-of-type(1) {
						color: #1E1F31;
						font-size: 32rpx;
						font-weight: bold;
					}

					view:nth-of-type(2) {
						color: #333333;
						font-size: 26rpx;
						font-weight: 500;
						margin-top: 20rpx;
					}

					view:nth-of-type(3) {
						color: #333333;
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 20rpx;
					}
				}

				.list-box-item-status {
					width: 85rpx;
					height: 36rpx;
					background: #468EF8;
					border-radius: 18rpx 0px 0px 18rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					font-weight: 500;
					margin-top: 36rpx;
				}

				.list-box-item-fw {
					padding-left: 200rpx;
					margin-top: 20rpx;
					padding-right: 20rpx;
				}

				.list-box-item-xz {
					width: 100%;
					padding-right: 20rpx;
					margin-top: 20rpx;

					.list-box-item-xz-sub {
						padding: 10rpx 30rpx;
						background-color: #468EF8;
						color: #ffffff;
						border-radius: 40rpx;
					}
				}
			}
		}
	}

	.headTop {
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		/* #ifdef H5 */
		padding-top: 30upx;
		/* #endif */
		/* #ifdef APP */
		padding-top: 120upx;
		/* #endif */
	}

	.showAvatar-title {
		padding-top: 30rpx;
		// margin-top: 30rpx;
		width: 100%;
		text-align: center;
		font-weight: bold;
	}

	.showAvatar-line {
		// padding-left: 40rpx;
		margin-left: 40rpx;
		margin-top: 30rpx;
		padding-left: 10rpx;
		border-left: 3px solid #557EFD;
		font-weight: bold;
	}

	.showAvatar-list {
		width: 100%;
		// padding: 20rpx 40rpx 0 40rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		margin-top: 20rpx;
	}

	.showAvatar-txt {
		padding-left: 40rpx;
		padding-right: 40rpx;
		margin-top: 20rpx;
	}

	.showAvatar-submit {
		margin-top: 30rpx;
		width: 100%;
		height: 80rpx;
		// margin-bottom: 30rpx;
		padding: 0 40rpx;

		.showAvatar-submit-box {
			width: 100%;
			height: 100%;
			background-color: #557EFD;
			border-radius: 14rpx;
			color: #ffffff;
		}
	}

	.showAvatar-bottom {
		width: 100%;
		height: 30rpx;
	}

	.showAvatar {
		width: 100%;
		// height: 100%;
		margin-top: 20rpx;
		align-content: flex-start;

		.showAvatar-uploud {
			width: 500rpx;
			height: 300rpx;
			// background-color: red;
			border: 1px dashed #8f8f94;
			border-radius: 14rpx;

			.showAvatar-uploud-txt {
				color: #8f8f94;
				margin-top: 20rpx;
			}
		}

		.showAvatar-submit {
			width: 500rpx;
			height: 80rpx;
			background-color: #557EFD;
			border-radius: 14rpx;
			color: #ffffff;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
		}
	}
</style>